<style lang='scss'>
.game {
	// display: flex;
	// flex-direction: column;
	position:absolute; 
	overflow:hidden; 
	-webkit-overflow-scrolling: touch; 
	top:0; 
	left:0; 
	bottom:0; 
	right:0;
	.wrapper{
		height: 100%;
		.passTitle{
			font-size: 1.6rem;
			text-align: center;
			margin-top: 2rem;
		}
		.contentBox{
			height: 100%;
			width: 100%;
			.drag {
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: red;
				z-index:3;
			}
			.targetBox{
				position: absolute;
				width: 10rem;
				height: 10rem;
				top: 20rem;
				left: 10rem;
				border: 1px solid red;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}
	}
	.popBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba($color: #000000, $alpha: 0.98);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    img{
      width:100%;
    }
    .tips{
      color:white
    }
    .close-icon{
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
    }
  }
}

</style>
<template>
  <div class="game" ref="game">
		<div class="wrapper">
			<div class="passTitle">第1关</div>
			<myheader></myheader>
			<div class="contentBox">
				<div ref="dragBox" class="drag"
					@touchstart.stop="touchstartHandle('dragBox',$event)"   
					@touchmove.stop="touchmoveHandle('dragBox',$event)"
					>
					可拖拽元素
				</div>
				<div ref="targetBox" class="targetBox">此地无银三百两</div>
			</div>
		</div>
		<!-- <div class="popBox" v-if="showPop">
      <div class="tips margT-m fs-16">恭喜你已经过关！</div>
    </div> -->
  </div>
</template>

<script>
import myheader from './header2.vue'
export default {
  name: 'game',
  components: {
		myheader
  },
  data() {
	return {
	  coordinate: {
		  client: {},
		  elePosition: {},
		  targetScope: {},
			showPop: false
	  }
	}
  },
  mounted() {
	  const element = this.$refs["targetBox"]
	  console.log(this.$refs["targetBox"].getBoundingClientRect().width)
	  this.coordinate.targetScope.x = [element.offsetLeft + element.getBoundingClientRect().width*1/4,element.offsetLeft + element.getBoundingClientRect().width*3/4]
	  this.coordinate.targetScope.y = [element.offsetTop + element.getBoundingClientRect().height*1/4,element.offsetTop + element.getBoundingClientRect().height*3/4]
	  console.log("this.coordinate.targetScope",this.coordinate.targetScope)
	  
  },
  methods: {
		touchSatrtFunc(evt) {
        try
        {
            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            var touch = evt.changedTouches[0]; //获取第一个触点
            var x = Number(touch.clientX); //页面触点X坐标
            var y = Number(touch.clientY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;

        } catch (e) {
            // alert('touchSatrtFunc：' + e.message);
        }
    },
	  //禁止下拉
    overscroll(el) {
			el.addEventListener('touchstart', function() {
				var top = el.scrollTop
					, totalScroll = el.scrollHeight
					, currentScroll = top + el.offsetHeight
				//If we're at the top or the bottom of the containers
				//scroll, push up or down one pixel.
				//
				//this prevents the scroll from "passing through" to
				//the body.
				if(top === 0) {
					el.scrollTop = 1
				} else if(currentScroll === totalScroll) {
					el.scrollTop = top - 1
				}
			})
			el.addEventListener('touchmove', function(evt) {
				//if the content is actually scrollable, i.e. the content is long enough
				//that scrolling can occur
				if(el.offsetHeight < el.scrollHeight)
					evt._isScroller = true
			})
		},
	  // @touchend="touchendHandle('dragBox',$event)"
	  touchendHandle(refName, e) {
		  let element = e.changedTouches[0]
		  console.log("e",e)
		  console.log(`鼠标位置: (${element.clientX},${element.clientY})`)
		  if(element.clientX>=this.coordinate.targetScope.x[0]&&element.clientX<=this.coordinate.targetScope.x[1]){
			if(element.clientY>=this.coordinate.targetScope.y[0]&&element.clientY<=this.coordinate.targetScope.y[1]){
				alert("恭喜你，捡到300两银子！")	  
			}  
		  }
	  },
	  touchstartHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 记录点击的坐标
		  this.coordinate.client = {
			  x: element.clientX,
			  y: element.clientY
		  }
		  // 记录需要移动的元素坐标
		  this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
		  this.coordinate.elePosition.top = this.$refs[refName].offsetTop
	  },
	  touchmoveHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
		  let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
		  let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
		  // 限制可移动距离，不超出可视区域
		  x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
		  y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
		  // 移动当前元素
		  this.$refs[refName].style.left = x + 'px'
		  this.$refs[refName].style.top = y + 'px'
		  // console.log(`(${x},${y})`)
		  this.ok(e)
	  },
	  ok(e) {
		let element = e.changedTouches[0]
		// console.log("e",e)
		// console.log(`鼠标位置: (${element.clientX},${element.clientY})`)
		if(element.clientX>=this.coordinate.targetScope.x[0]&&element.clientX<=this.coordinate.targetScope.x[1]){
			if(element.clientY>=this.coordinate.targetScope.y[0]&&element.clientY<=this.coordinate.targetScope.y[1]){
				alert("恭喜你，捡到300两银子！")	  
			}  
		}
	  },
	}
}
</script>
